import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入提示框和标题组件
import 'echarts/lib/chart/map';
import 'echarts/map/js/china';
import 'echarts/lib/component/tooltip';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Statistic, Icon, Tooltip } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMapMarker } from '@fortawesome/fontawesome-free-solid'
import styles from "./index.less";

let myChart;
@connect(({ visitor, loading }) => ({
  visitor,
  loading: loading.effects['visitor/fetch'],
}))
class Visitor extends Component {
  state = {
    list: [],
    total: '',
  };

  componentDidMount() {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'visitor/fetch',
        payload: { robotId: currentUser.robotId },
        callback: response => {
          Visitor.getOption(response.list);
          this.setState({
            total: `${response.total}人`,
          });
        },
      });
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  static getOption(list) {
    myChart = echarts.init(document.getElementById('main'));
    const options = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: [''],
      },
      visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'top',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        color: ['rgb(26,195,243)', 'rgb(89,215,248)', 'rgb(179,244,255)']
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: '',
          type: 'map',
          mapType: 'china',
          roam: false,
          label: {
            normal: {
              show: true,
            },
            emphasis: {
              show: true,
            },
          },
          data: list,
        },
      ],
    };
    myChart.setOption(options, true);
  }

  render() {
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Row className={styles.colorBackground}>
            <Col style={{ padding: 10, }} xs={24}>
              <div className={styles.title}>
                <FontAwesomeIcon icon={faMapMarker} style={{ color: "rgb(25,195,243)", margin: '0 10px' }} />
                <span>
                  <FormattedMessage
                    id="app.visitordistribution.title"
                    defaultMessage="The Proportion of Sales"
                  />
                </span>
                <span>
                  <Tooltip
                    placement="top"
                    title={<FormattedMessage
                      id="app.visitordistribution.titleTip"
                      defaultMessage="The Proportion of Sales"
                    />}
                    arrowPointAtCenter
                  >
                    <Icon type="info-circle" />
                  </Tooltip>
                </span>
              </div>
            </Col>
          </Row>
          <Card
            bordered={false}
          >
            <Statistic
              title={
                <FormattedMessage
                  id="app.visitordistribution.total"
                  defaultMessage="The Proportion of Sales"
                />
              }
              value={this.state.total}
            />
            <div id="main" span={20} style={{ height: '700px', margin: '10px auto' }} />
          </Card>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Visitor);
